<!-- 操作员 -->
<template>
    <div class="content operater">
        <el-row class="block_title row">
            <el-col :span="12" class="operater_title_left">操作员列表</el-col>
            <el-col :span="12" class="right_top_btn">
                <el-button size="small" @click="addOperater()"><i class="iconfont icon-tianjia"></i>&nbsp;添加操作员</el-button>
            </el-col>
        </el-row>
        <el-row class="accountList">
            <Table :tableData="tableData" :pagination="false">
                <template slot-scope="{scope}">
                    <el-button size="small" type="primary" v-if="operaterLength > 1 && scope.row.is_operator != 0" @click="removeOperater(scope.row)">解绑</el-button>
                </template>
            </Table>
        </el-row>
        <WarmPrompt class="warm-tips" warContent="联系人(管理员)在本平台可以授权多个操作员，操作员可被多家企业授权绑定。"/>
        <!-- 添加操作员 -->
        <DialogInput ref="addOperaterDialog" title="绑定操作员">
            <div class="rem-dialog-con">
                <div class="rem-dialog-con text_left">
                    <el-form :model="form" :rules="rules" label-width="120px" size="small">
                        <el-form-item label="操作员手机号：">
                            <el-col :span="24">
                                <el-input class="operater-int" v-model="form.operator_phone_number" type="text" maxlength="11" placeholder="请输入操作员手机号"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="短信验证码：">
                            <el-col :span="24">
                                <el-input class="operater-code" v-model="form.operator_phone_number_code" type="text" maxlength="6" placeholder="请输入短信验证码"></el-input><MessageCode @click.native="getMessageCode" ref="messageCode" :phoneNumber="form.operator_phone_number" class="operater-btn"></MessageCode>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span slot="Remfooter" class="dialog-footer">
                <el-button type="close" size="small" @click="closeDialog()">取消</el-button>
                <el-button type="primary" size="small" @click="comfirmAddOperater()">提交</el-button>
            </span>
        </DialogInput>
        <!-- 解绑操作员 -->
        <DialogInput ref="removeOperaterDialog" title="解绑操作员">
            <div class="rem-dialog-con">
                <div class="rem-dialog-con text_left">
                    <el-form :model="form" :rules="rules" label-width="120px" size="small">
                        <el-form-item label="操作员手机号：">
                            <el-col :span="24">
                                <el-input class="operater-int" v-model="form.operator_phone_number" type="text" placeholder="请输入操作员手机号"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="短信验证码：">
                            <el-col :span="24">
                                <el-input class="operater-code" v-model="form.operator_phone_number_code" type="text" maxlength="6" placeholder="请输入短信验证码"></el-input><MessageCode @click.native="getMessageCode" ref="messageCode" :phoneNumber="form.operator_phone_number" class="operater-btn"></MessageCode>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span slot="Remfooter" class="dialog-footer">
                <el-button type="close" size="small" @click="closeDialog()">取消</el-button>
                <el-button type="primary" size="small" @click="comfirmRemoveOperater()">提交</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Table from '@component/common/HpxTable.vue';
    import DialogInput from '@component/common/DialogInput.vue';
    import WarmPrompt from '@component/common/WarmPrompt.vue';
    import MessageCode from '@component/common/MessageCode.vue';
    import { mapGetters, mapState } from 'vuex';
    import moment from 'moment';
    @Component({
        components: {
            Table,
            DialogInput,
            WarmPrompt,
            MessageCode
        },
        computed:{
            ...mapState([
                'userInfo'
            ])
        }
    })
    export default class Operater extends Vue {
        form = {
            operator_phone_number: '',
            operator_phone_number_code: ''
        }
        rules = {

        }
        tableData:TableData = {
            header:[
                {
                    label: '姓名',
                    key: 'member_name'
                },
                {
                    label: '手机号',
                    key: 'phone_number',
                },
                {
                    label: '绑定时间',
                    key: 'bundling_time',
                    formatter: row => moment(row.bundling_time).format('YYYY-MM-DD HH:mm')
                }
            ],
            body: [],
            footer: {
                total: 100,
                pageSize: 10,
                currentPage: 1,
            }
        }
        get operaterLength () {
            return this.tableData.body.length;
        }
        // 获取操作员列表
        async getOperater () {
            let res = await this.$http.get(`customers/enterpriseMember?is_user=1&customer_id=${this.userInfo.customer_id}`)
            if(res.status == 200){
                if(res.data){
                    this.tableData.body = res.data;
                }
            }
        }
        // 添加操作员
        addOperater () {
            this.form.operator_phone_number = ''
            this.form.operator_phone_number_code = ''
            this.$refs['addOperaterDialog'].openDialog();
        }
        async comfirmAddOperater () {
            if(!this.form.operator_phone_number_code){
                this.$alert('请输入短信验证码！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let operaterForm = this.form;
            let res = await this.$http.post('customers/enterpriseMember',operaterForm)
            if(res.status == 201){
                this.getOperater();
                this.$refs['addOperaterDialog'].closeDialog();
                this.$alert('添加操作员成功','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
            }
        }
        removeOperater (row) {
            this.form.operator_phone_number = row.phone_number;
            this.$refs['removeOperaterDialog'].openDialog();
        }
        async comfirmRemoveOperater () {
            if(!this.form.operator_phone_number_code){
                this.$alert('请输入短信验证码！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let res = await this.$http.delete(`customers/enterpriseMember/${this.form.operator_phone_number}`)
            if(res.status == 204){
                this.$refs['removeOperaterDialog'].closeDialog();
                this.getOperater()
                this.$alert('解绑操作员成功','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
            }
        }
        closeDialog () {
            this.$refs['addOperaterDialog'].closeDialog();
            this.$refs['removeOperaterDialog'].closeDialog();
        }
        // 获取手机验证码
        getMessageCode () {
            if(!this.form.operator_phone_number){
                this.$alert('请输入操作员手机号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            this.$refs.messageCode.start();
        }
        mounted () {
            this.getOperater();
        }
    }
</script>

<style lang="scss" scoped>
    .warm-tips{
        display: block;
    }
    .block_title{
        font-size: $__font-size-default;
        line-height: 28px;
        margin-bottom: 10px;
    }
    .right_top_btn{
        display: flex;
        justify-content: flex-end;
        button{
            border: 1px solid $__color-link;
            background-color: $__color-bg-multiple;
            color: $__color-link;
            font-size: $__little-font-size;
        }
        .el-button--small {
            padding: 7px 15px;
        }
    }
    .operater_title_left:before {
        content: '';
        color: $__color-primary;
        width: 4px;
        height: 14px;
        background-color: $__color-primary;
        display: inline-block;
        margin-right: 8px;
    }
    .accountList{
        border-top:  1px solid $__color-primary;
        margin-bottom: 12px;
    }
    .operater-btn {
        height: $height-int !important;
    }
</style>
<style lang="scss">
    .operater-int {
        .el-input__inner {
            width: 313px;
        }
    }
    .operater-code.el-input{
        width: 53%;
        .el-input__inner {
            width: 208px;
        }
    }
    .el-dialog__footer {
        /*border-top: 1px solid $__color-border;*/
        .el-button--close {
            @include base-btn-close-150;
        }
        .el-button--primary {
            @include base-btn-submit-150;
        }
    }
    .operater{
        .el-dialog__footer {
            .dialog-footer{
                padding-left: 17px;
            }
        }
    }
</style>